<div id="signupComponent">
    <img id ="logo" class="ui centered image" src="assets/images/cds.png">
    <div class="ui two column centered grid">
        <div *ngIf="showWaitingMessage;then wait;else nowait"></div>
        <ng-template #nowait>
            <div class="column">
                <h3 class="ui top block attached header">
                    {{ 'account_signup_title' | translate }}
                </h3>
                <div class="ui bottom attached segment">
                    <form class="ui form" (ngSubmit)="createUser()" #loginForm="ngForm">
                        <div class="field">
                            <label>{{ 'user_label_username' | translate }}</label>
                            <input type="text" [(ngModel)]="user.username" name="username">
                        </div>
                        <div class="field">
                            <label>{{ 'user_label_fullname' | translate }}</label>
                            <input type="text" [(ngModel)]="user.fullname" name="fullname">
                        </div>
                        <div class="field">
                            <label>{{ 'user_label_email' | translate }}</label>
                            <input type="email" [(ngModel)]="user.email" name="email">
                        </div>
                        <button id="signUpButton" class="ui green right floated button" type="submit">{{ 'account_signup_btn_create' | translate }}</button>
                        <div class="left floated block">
                            <a class="left floated pointing" id="passwordLink" (click)="navigateToPassword()">{{ 'account_btn_password' | translate }}</a>
                            <a class="left floated pointing" id="loginLink" (click)="navigateToLogin()">{{ 'account_btn_login' | translate}}</a>
                        </div>
                    </form>
                </div>
            </div>
        </ng-template>
        <ng-template #wait>
            <div class="column">
                <div class="ui info message">
                    {{ 'account_signup_waiting_text' | translate }}
                </div>
            </div>
        </ng-template>
    </div>
</div>
